import { useDispatch } from 'react-redux';
import { delTodo, toggleTodo } from '../store/actions/todos';

export const TodoItem = (props) => {
  const dispatch = useDispatch();

  // 删除todo事件处理函数
  const handleDel = (id) => {
    // 发action
    dispatch(delTodo(id));
  };

  return (
    // 编辑时，添加类名：editing
    <li className={props.done ? 'completed' : ''}>
      <div className="view">
        <input
          className="toggle"
          type="checkbox"
          checked={props.done}
          onChange={() => dispatch(toggleTodo(props.id))}
        />
        <label>{props.text}</label>
        <button
          className="destroy"
          // onClick={() => handleDel(props.id)}
          onClick={() => dispatch(delTodo(props.id))}
        ></button>
      </div>
      <input className="edit" />
    </li>
  );
};
